<style>
    html {
        background-color: #fff;
    }

    .pic-more { width:100%; left; margin: 10px 0 0 0;height: 90px; border: 1px #eee solid; padding: 10px;}
    .pic-more li { width:90px; float: left; margin-right: 5px;}
    .pic-more li .layui-input { display: initial; }
    .pic-more li a { position: absolute; top: 0; display: block; }
    .pic-more li a i { font-size: 24px; background-color: #008800; }
    #slide-pc-priview .item_img img{ width: 90px; height: 90px;}
    #slide-pc-priview li{position: relative;}
    #slide-pc-priview li .operate{ color: #000; display: none;}
    #slide-pc-priview li .toleft{ position: absolute;top: 40px; left: 1px; cursor:pointer;}
    #slide-pc-priview li .toright{ position: absolute;top: 40px; right: 1px;cursor:pointer;}
    #slide-pc-priview li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}
    #slide-pc-priview li:hover .operate{ display: block;}
</style>

<div class="layui-fluid layui-layout-admin">
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<label class="layui-form-label">名称</label>
			<div class="layui-input-inline">
				<input type="text" name="name" lay-verify="required" placeholder="请输入商品名称" autocomplete="off" class="layui-input" value="">
			</div>
		</div>
		<div class="layui-form-item" id="pics">
			<div class="layui-form-label">相册图集</div>
			<div class="layui-input-block" style="width: 70%;">
				<div class="layui-upload">
					<div class="layui-btn-group">
						<button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">选择图片</button>
					</div>
					<div class="pic-more">
						<ul class="pic-more-upload-list" id="slide-pc-priview">

						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">多规格商品</label>
			<div class="layui-input-block">
				<input type="checkbox" class="goods_type" lay-skin="switch" lay-filter="type" lay-text="是|否">
			</div>
		</div>
		<div class="dan">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">价格</label>
					<div class="layui-input-inline">
						<input type="text" name="price" autocomplete="off" class="layui-input" value="0">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">市场价</label>
					<div class="layui-input-inline">
						<input type="text" name="market_price" autocomplete="off" class="layui-input" value="0">
					</div>
				</div>
			</div>
		</div>

		<div class="duo" style="display: none">
			<fieldset class="layui-elem-field" style="margin-top: 30px;">
				<legend>多规格</legend>
				<div class="attr_box"></div>
				<div id="skuTable" style="width: 90%; margin-left: 110px;"></div>
			</fieldset>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">销量</label>
			<div class="layui-input-inline">
				<input type="text" name="sales" placeholder="请输入商品初始销量" autocomplete="off" class="layui-input" value="0">
			</div>
			<div class="layui-form-mid layui-word-aux">请输入商品初始销量</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">分类</label>
				<div class="layui-input-inline">
					<select name="category_id">
						<option>请选择</option>
					</select>
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">详情</label>
			<div class="layui-input-block">
				<textarea id="content" style="display: none;"></textarea>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<div class="layui-footer">
					<input type="hidden" name="type" value="1" />
					<input type="hidden" name="content" value="" />
					<input type="hidden" name="attr" value="" />
					<input type="hidden" name="id" value="0" />
					<input type="hidden" name="list_table_name" value="goods-list" />
					<button class="layui-btn" lay-submit lay-filter="LAY-send-submit" id="LAY-send-submit">立即提交</button>
				</div>
			</div>
		</div>
	</form>
</div>
<script type="text/html" template lay-done="layui.data.sendParams(d.params)">
</script>

<script>
	layui.data.sendParams = function(params) {
		layui.use(['upload', 'layedit', 'sku', 'form'], function() {
			var $ = layui.jquery
				, upload = layui.upload
				, layedit = layui.layedit
				, sku = layui.sku
				, form = layui.form;

			let _index = layer.load();
			$(".layui-form").attr('action', layui.setter.API_HOST + 'admin/goods/save')
			let _goods_id = params.id | 0;
			$(".title").text((_goods_id > 0 ? '编辑' : '添加') + '商品');

			let _edit_index = '';

			layedit.set({
				uploadImage: {
					url: layui.setter.API_HOST + 'admin/util/image_upload', //接口url
				}
			});

			layui.admin.req({
				url: layui.setter.API_HOST + 'admin/goods/save',
				data: {
					id: _goods_id
				},
				done: function(res) {
					layer.close(_index);
					if (res.code == 0) {
						if(res.data.data) {
							$("input[name='name']").val(res.data.data.name);
							$("input[name='sales']").val(res.data.data.sales);
							$("input[name='price']").val(res.data.data.price);
							$("input[name='market_price']").val(res.data.data.market_price);
							$("input[name='id']").val(res.data.data.id);
							$("input[name='type']").val(res.data.data.type);
							if (res.data.data.content) {
								$("#content").html(res.data.data.content.content)
							}
							// 图片
							let _images_html = [];
							if (res.data.data.images) {
								$.each(res.data.data.images, function (i, d) {
									_images_html.push('<li class="item_img">\n' +
											'<div class="operate">\n' +
											'<i class="toleft layui-icon"></i>\n' +
											'<i class="toright layui-icon"></i>\n' +
											'<i  class="close layui-icon"></i>\n' +
											'</div>\n' +
											'<img src="'+ d.min_image +'" class="img" >\n' +
											'<input type="hidden" name="pc_src[]" value="'+ d.image +'" />\n' +
											'</li>');
								})
							} else {
								_images_html.push('<p style="text-align: center; margin-top: 20px; color: #666">请选择图片，支持批量选择</p>')
							}
							$(".pic-more-upload-list").html(_images_html.join(''));

							if (res.data.data.type === 2) {
								$(".goods_type").prop('checked', true);
								form.render();
								$(".duo").show();
							}
						}

						// 属性
						if (res.data.attribute) {
							let _attribute_html = [];
							$.each(res.data.attribute, function(i, d) {
								_attribute_html.push('<div class="layui-form-item">');
								_attribute_html.push('		<label class="layui-form-label SKU_TYPE" data-id="'+ d.id +'">'+ d.name +'</label>');
								if (d.child) {
									_attribute_html.push('		<div class="layui-input-block">');
									$.each(d.child, function (k, v) {
										if (v.checked === 1) {
											_attribute_html.push('			<input type="checkbox" class="sku_value" lay-filter="sku" checked value="'+ v.id +'" title="'+ v.name +'">');
										} else {
											_attribute_html.push('			<input type="checkbox" class="sku_value" lay-filter="sku" value="'+ v.id +'" title="'+ v.name +'">');
										}
									});
									_attribute_html.push('		</div>');
								}
								_attribute_html.push('	</div>');
							});
							$(".attr_box").prepend(_attribute_html.join(''));
							form.render();

							let _get_attrs_url = layui.setter.API_HOST + 'admin/goods/get_attrs';
							sku.setAlreadySetSkuVals(_get_attrs_url + '?id=' + _goods_id);
						}
						// 分类
						if(res.data.categories) {
							let _categories_html = [];
							$.each(res.data.categories, function(i, d) {
								if(res.data.data && res.data.data.category_id == d.id)
									_categories_html.push('<option value="'+ d.id +'" selected>'+ d.html + d.title +'</option>');
								else
									_categories_html.push('<option value="'+ d.id +'" >'+ d.html + d.title +'</option>');
							});
							$("select[name='category_id']").append(_categories_html.join(''));
							form.render();
						}
						_edit_index = layedit.build('content'); //建立编辑器
					} else {
						layer.msg('请求失败', {
							icon: 5
						})
					}
				}
			});

			form.on('checkbox(sku)', function(data){
				sku.createTable();
			});

			//监听指定开关
			form.on('switch(type)', function(data){
				if (this.checked ) {
					$(".duo").show();
				} else {
					$(".duo").hide();
				}
				$("input[name='type']").val(this.checked ? 2 : 1);
			});

			$("#LAY-send-submit").click(function () {
				let _attr = [];
				$(".sku_table_tr").each(function (i, d) {
					_attr.push([$(this).data('attrids'), $(this).find(".price").val(), $(this).find(".sku-img").val()]);
				});
				$("input[name='attr']").val(JSON.stringify(_attr));
				$("input[name='content']").val(layedit.getContent(_edit_index));
			});

			upload.render({
				elem: '#slide-pc',
				url: layui.setter.API_HOST + 'admin/util/image_upload',
				headers: { //通过 request 头传递
					token: layui.data('layuiAdmin').token
				},
				size: 500,
				exts: 'jpg|png|jpeg',
				multiple: true,
				data: {
					type: "product"
				},
				before: function(obj) {
					layer.msg('图片上传中...', {
						icon: 16,
						shade: 0.01,
						time: 0
					})
				},
				done: function(res) {
					layer.close(layer.msg());//关闭上传提示窗口
					if(res.code > 0) {
						return layer.msg(res.msg);
					}
					let _list_box = $('#slide-pc-priview');
					if (_list_box.find('p').length > 0) {
						_list_box.html("");
					}
					_list_box.append('<li class="item_img"><div class="operate"><i class="toleft layui-icon"></i><i class="toright layui-icon"></i><i  class="close layui-icon"></i></div><img src="' + res.data.image + '" class="img" ><input type="hidden" name="pc_src[]" value="' + res.data.path + '" /></li>');
				}
			});

			//点击多图上传的X,删除当前的图片
			let _body = $("body");
			_body.on("click",".close",function(){
				$(this).closest("li").remove();
			});
			//多图上传点击<>左右移动图片
			_body.on("click",".pic-more ul li .toleft",function(){
				var li_index=$(this).closest("li").index();
				if(li_index>=1){
					$(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
				}
			});
			_body.on("click",".pic-more ul li .toright",function(){
				var li_index=$(this).closest("li").index();
				$(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
			});

		});
	}
</script>
